<!-- 好友拼单 -->
<template>
  <view class="spell-order">
    <view class="spell-end">
      <view class="title">已完成选购</view>
      <view class="summary-title">等待发起人提交订单</view>
    </view>

    <view class="order-section">
      <view class="md-title">
        <text>您需支付</text>
        <text>¥{{ totalPrice }}</text>
      </view>
      <view class="md-name"> 蜜雪冰城 </view>
      <!-- 点餐人及已点商品列表 -->
      <view class="user-goods-list">
        <view
          class="user-goods-item"
          v-for="(item, index) in goods_list"
          :key="index"
        >
          <image class="goods-img" :src="item.goods_pic" mode="" />
          <view class="godos-info">
            <view class="info-detail">
              <view class="goods-name">{{ item.goods_name }}</view>
              <view class="sku-info">
                <text
                  style="margin-right: 6px"
                  v-for="(attr, attrIndex) in item.attr_list"
                  :key="attrIndex"
                >
                  {{ attr.attr_group_name }}:{{ attr.attr_name }}
                </text>
              </view>
              <view class="price">¥{{ item.price }}</view>
            </view>
            <view class="info-num">x{{ item.num }}</view>
          </view>
        </view>
      </view>
      <!-- 合计 -->
      <view class="user-total">
        <text>合计：</text>
        <text>¥{{ totalPrice }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { orderMealMixin } from "../../mixins/index";

export default {
  components: {},
  props: {
    shareId: {
      type: String,
      default: "",
    },
    dataList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      userOrders: [
        {
          name: "haha",
        },
      ],
      canSubmit: true,
      isInitiator: false, // 是否是发起人
      showConfirmModal: false,
      routeData: null,
      shareSpelled: false, // 拼单是否已提交
    };
  },
  mixins: [orderMealMixin], //混入文件
  filters: {},
  computed: {
    goods_list() {
      let [arr] = this.dataList.filter((d) => {
        return d.user_id == this.user_id;
      });
      if (arr) return arr.goods_list;
      return [];
    },
    totalPrice() {
      let total = 0;
      this.goods_list.forEach((d) => {
        total = total + d.price * d.num;
      });
      total = total.toFixed(2);
      return total;
    },
  },
  mounted() {},
  onShow() {},
  methods: {
    // 继续提交
    confirmSubmit() {
    },
    // 点击提交按钮
    handleSubmit() {
      if (!this.canSubmit) return;
      if (this.shareId != this.user_id) {
        // 别人分享的拼单
        this.shareSpelled = true;
        return;
      }
      this.showConfirmModal = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.spell-order {
  width: 100%;
  background: #f2f2f2;
  min-height: 100vh;
  padding-bottom: calc(env(safe-area-inset-bottom) + 112rpx);
  .spell-end {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8rpx 0 30rpx 0;
    .title {
      font-size: 40rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #f0250e;
    }
    .summary-title {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #262626;
      margin-top: 26rpx;
    }
  }
  .order-section {
    width: 100%;
    background: #ffffff;
    padding-top: 30rpx;
    margin-bottom: 24rpx;
    .md-title {
      width: 93.6%;
      display: flex;
      align-items: center;
      padding: 0 0 30rpx 0;
      margin: 0 auto;
      border-bottom: 1px solid #f8f8f8;
      text {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #262626;
      }
      text:nth-child(2) {
        color: #f0250e;
        margin-left: 4rpx;
      }
    }
    .md-name {
      width: 100%;
      padding: 30rpx 24rpx 0 24rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #8c8c8c;
    }
    .user-goods-list {
      width: 100%;
      padding: 0 24rpx 0 24rpx;
      .user-goods-item {
        width: 100%;
        display: flex;
        align-items: flex-start;
        padding: 24rpx 0;
        border-bottom: 1px solid #f8f8f8;
        .goods-img {
          width: 166rpx;
          height: 166rpx;
          background: #f2f2f2;
          border-radius: 10rpx;
          flex-shrink: 0;
        }
        .godos-info {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-left: 20rpx;
          .info-detail {
            flex: 1;
            .goods-name {
              font-size: 28rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #262626;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              max-width: 464rpx;
            }
            .sku-info {
              font-size: 24rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #8c8c8c;
              margin-top: 10rpx;
              max-width: 163px;
              word-break: break-all;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2; /* 这里是超出几行省略 */
              overflow: hidden;
            }
            .price {
              font-size: 32rpx;
              font-family: PingFang SC;
              font-weight: 600;
              color: #262626;
              margin-top: 14rpx;
            }
          }
          .info-num {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #8c8c8c;
          }
        }
      }
    }

    .user-total {
      padding: 24rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      text {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #262626;
      }
      text:nth-child(2) {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #f0250e;
      }
    }
  }
}
</style>
